<nz-tabset>
    <nz-tab [nzTitle]="l('Caches')">
        <nz-card [nzBordered]="false" [nzExtra]="cachingExtra" [nzTitle]="l('CachesHeaderInfo')">
            <ng-template #cachingExtra>
                <button nz-button [nzType]="'primary'" (click)="clearAllCaches()">
                    <i nz-icon type="delete"></i>
                    <span>{{"ClearAll" | localize}}</span>
                </button>
            </ng-template>

            <nz-table #ajaxTable [nzData]="dataList" [nzLoading]="isTableLoading" [nzShowPagination]="false">
                <tbody>
                    <tr *ngFor="let item of ajaxTable.data">
                        <td>
                            {{item.name}}
                        </td>
                        <td>
                            <a (click)="clearCache(item.name)">
                                {{"Clear" | localize}}
                            </a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </nz-tab>

    <nz-tab [nzTitle]="l('WebSiteLogs')">
        <nz-card [nzBordered]="false" [nzExtra]="webSiteLogExtra" [nzTitle]="l('WebSiteLogsHeaderInfo')">
            <ng-template #webSiteLogExtra>
                <button nz-button [nzType]="'primary'" (click)="downloadWebLogs()">
                    <i nz-icon type="download"></i>
                    <span>{{"DownloadAll" | localize}}</span>
                </button>
                <button nz-button [nzType]="'default'" (click)="getWebLogs()">
                    <i nz-icon type="reload"></i>
                    <span>{{"Refresh" | localize}}</span>
                </button>
            </ng-template>
            <div class="web-log-view full-height scrollbar">
                <div class="log-line" *ngFor="let log of logs">
                    <span [class]="getLogClass(log)">{{getLogType(log)}}</span>
                    {{getRawLogContent(log)}}
                </div>
            </div>
        </nz-card>
    </nz-tab>

</nz-tabset>
